<template>
  <view class="ability-page">
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      practiceId: '',
      abilityData: [
        { name: '能力A', score: 85, color: 'rgba(47, 136, 255, 1)' },
        { name: '能力B', score: 92, color: 'rgba(47, 136, 255, 1)' },
        { name: '能力C', score: 68, color: 'rgba(47, 136, 255, 1)' },
        { name: '能力D', score: 45, color: 'rgba(47, 136, 255, 1)' },
        { name: '能力E', score: 72, color: 'rgba(47, 136, 255, 1)' },
        { name: '能力F', score: 78, color: 'rgba(47, 136, 255, 1)' }
      ],
      canvasContext: null,
      canvasWidth: 300,
      canvasHeight: 300,
      centerX: 150,
      centerY: 150,
      radius: 120
    }
  },
  onLoad(options) {
    
  },
  onReady() {
    
  },
  methods: {
    // 加载能力数据
    async loadAbilityData() {
      try {
        // 从API获取能力分析数据
        const result = await this.$api.getAbilityAnalysis(this.practiceId);
        this.abilityData = result.abilities;
        this.drawRadarChart();
      } catch (error) {
        console.error('加载能力数据失败:', error);
        // 使用假数据进行测试
        this.loadMockAbilityData();
      }
    },
    
    // 加载假数据
    loadMockAbilityData() {
      // 直接设置能力数据
      this.abilityData = [
        { name: '能力A', score: 85, color: 'rgba(47, 136, 255, 1)' },
        { name: '能力B', score: 92, color: 'rgba(47, 136, 255, 1)' },
        { name: '能力C', score: 68, color: 'rgba(47, 136, 255, 1)' },
        { name: '能力D', score: 45, color: 'rgba(47, 136, 255, 1)' },
        { name: '能力E', score: 72, color: 'rgba(47, 136, 255, 1)' },
        { name: '能力F', score: 78, color: 'rgba(47, 136, 255, 1)' }
      ];
      
      // 绘制雷达图
      this.$nextTick(() => {
        this.drawRadarChart();
      });
    },
    

    
    // 初始化画布
    initCanvas() {
      const query = uni.createSelectorQuery().in(this);
      query.select('.radar-canvas')
        .fields({ node: true, size: true })
        .exec((res) => {
          if (res[0]) {
            const canvas = res[0].node;
            const ctx = canvas.getContext('2d');
            
            // 设置画布尺寸
            const dpr = uni.getSystemInfoSync().pixelRatio;
            canvas.width = this.canvasWidth * dpr;
            canvas.height = this.canvasHeight * dpr;
            ctx.scale(dpr, dpr);
            
            this.canvasContext = ctx;
            this.drawRadarChart();
          } else {
            // 兼容性处理
            this.initCanvasFallback();
          }
        });
    },
    
    // 兼容性初始化画布
    initCanvasFallback() {
      const ctx = uni.createCanvasContext('radarChart', this);
      this.canvasContext = ctx;
      this.drawRadarChartFallback();
    },
    
    // 绘制雷达图
    drawRadarChart() {
      if (!this.canvasContext) return;
      
      const ctx = this.canvasContext;
      ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
      
      // 绘制网格线
      this.drawGrid(ctx);
      
      // 绘制数据区域
      this.drawDataArea(ctx);
      
      // 绘制数据点
      this.drawDataPoints(ctx);
    },
    
    // 绘制网格线
    drawGrid(ctx) {
      ctx.strokeStyle = '#e0e0e0';
      ctx.lineWidth = 1;
      
      // 绘制三个同心六边形
      for (let i = 1; i <= 3; i++) {
        const radius = (this.radius * i) / 3;
        ctx.beginPath();
        
        for (let j = 0; j < 6; j++) {
          const angle = (j * Math.PI) / 3;
          const x = this.centerX + radius * Math.cos(angle);
          const y = this.centerY + radius * Math.sin(angle);
          
          if (j === 0) {
            ctx.moveTo(x, y);
          } else {
            ctx.lineTo(x, y);
          }
        }
        
        ctx.closePath();
        ctx.stroke();
      }
      
      // 绘制轴线
      ctx.strokeStyle = '#cccccc';
      ctx.lineWidth = 1;
      
      for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI) / 3;
        const x = this.centerX + this.radius * Math.cos(angle);
        const y = this.centerY + this.radius * Math.sin(angle);
        
        ctx.beginPath();
        ctx.moveTo(this.centerX, this.centerY);
        ctx.lineTo(x, y);
        ctx.stroke();
      }
    },
    
    // 绘制数据区域
    drawDataArea(ctx) {
      ctx.fillStyle = 'rgba(47, 136, 255, 0.6)';
      ctx.strokeStyle = 'rgba(47, 136, 255, 1)';
      ctx.lineWidth = 2;
      
      ctx.beginPath();
      
      for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI) / 3;
        const score = this.abilityData[i].score;
        const radius = (this.radius * score) / 100;
        const x = this.centerX + radius * Math.cos(angle);
        const y = this.centerY + radius * Math.sin(angle);
        
        if (i === 0) {
          ctx.moveTo(x, y);
        } else {
          ctx.lineTo(x, y);
        }
      }
      
      ctx.closePath();
      ctx.fill();
      ctx.stroke();
    },
    
    // 绘制数据点
    drawDataPoints(ctx) {
      ctx.fillStyle = 'rgba(47, 136, 255, 1)';
      ctx.strokeStyle = '#ffffff';
      ctx.lineWidth = 2;
      
      for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI) / 3;
        const score = this.abilityData[i].score;
        const radius = (this.radius * score) / 100;
        const x = this.centerX + radius * Math.cos(angle);
        const y = this.centerY + radius * Math.sin(angle);
        
        ctx.beginPath();
        ctx.arc(x, y, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.stroke();
      }
    },
    
    // 兼容性绘制雷达图
    drawRadarChartFallback() {
      const ctx = this.canvasContext;
      
      // 绘制网格线
      this.drawGridFallback(ctx);
      
      // 绘制数据区域
      this.drawDataAreaFallback(ctx);
      
      // 绘制数据点
      this.drawDataPointsFallback(ctx);
      
      // 执行绘制
      ctx.draw();
    },
    
    // 兼容性绘制网格线
    drawGridFallback(ctx) {
      ctx.setStrokeStyle('#e0e0e0');
      ctx.setLineWidth(1);
      
      // 绘制三个同心六边形
      for (let i = 1; i <= 3; i++) {
        const radius = (this.radius * i) / 3;
        ctx.beginPath();
        
        for (let j = 0; j < 6; j++) {
          const angle = (j * Math.PI) / 3;
          const x = this.centerX + radius * Math.cos(angle);
          const y = this.centerY + radius * Math.sin(angle);
          
          if (j === 0) {
            ctx.moveTo(x, y);
          } else {
            ctx.lineTo(x, y);
          }
        }
        
        ctx.closePath();
        ctx.stroke();
      }
      
      // 绘制轴线
      ctx.setStrokeStyle('#cccccc');
      ctx.setLineWidth(1);
      
      for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI) / 3;
        const x = this.centerX + this.radius * Math.cos(angle);
        const y = this.centerY + this.radius * Math.sin(angle);
        
        ctx.beginPath();
        ctx.moveTo(this.centerX, this.centerY);
        ctx.lineTo(x, y);
        ctx.stroke();
      }
    },
    
    // 兼容性绘制数据区域
    drawDataAreaFallback(ctx) {
      ctx.setFillStyle('rgba(47, 136, 255, 0.6)');
      ctx.setStrokeStyle('rgba(47, 136, 255, 1)');
      ctx.setLineWidth(2);
      
      ctx.beginPath();
      
      for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI) / 3;
        const score = this.abilityData[i].score;
        const radius = (this.radius * score) / 100;
        const x = this.centerX + radius * Math.cos(angle);
        const y = this.centerY + radius * Math.sin(angle);
        
        if (i === 0) {
          ctx.moveTo(x, y);
        } else {
          ctx.lineTo(x, y);
        }
      }
      
      ctx.closePath();
      ctx.fill();
      ctx.stroke();
    },
    
    // 兼容性绘制数据点
    drawDataPointsFallback(ctx) {
      ctx.setFillStyle('rgba(47, 136, 255, 1)');
      ctx.setStrokeStyle('#ffffff');
      ctx.setLineWidth(2);
      
      for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI) / 3;
        const score = this.abilityData[i].score;
        const radius = (this.radius * score) / 100;
        const x = this.centerX + radius * Math.cos(angle);
        const y = this.centerY + radius * Math.sin(angle);
        
        ctx.beginPath();
        ctx.arc(x, y, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.stroke();
      }
    },
    
    // 获取标签位置
    getLabelPosition(index) {
      const angle = (index * Math.PI) / 3;
      const radius = this.radius + 30;
      const x = this.centerX + radius * Math.cos(angle);
      const y = this.centerY + radius * Math.sin(angle);
      
      // 转换为rpx单位
      const xRpx = x * 2;
      const yRpx = y * 2;
      
      return {
        position: 'absolute',
        left: xRpx + 'rpx',
        top: yRpx + 'rpx',
        transform: 'translate(-50%, -50%)'
      };
    }
  }
}
</script>

<style lang="scss">
.ability-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 24rpx;
  
  // 能力分析标题
  .ability-header {
    margin-bottom: 32rpx;
    
    .ability-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
    }
  }
  
  // 雷达图容器
  .radar-container {
    position: relative;
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-bottom: 32rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .radar-canvas {
      width: 300px;
      height: 300px;
    }
    
    .ability-labels {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      
      .ability-label {
        position: absolute;
        
        .label-text {
          font-size: 24rpx;
          color: #333333;
          font-weight: bold;
          background: rgba(255, 255, 255, 0.9);
          padding: 4rpx 8rpx;
          border-radius: 8rpx;
        }
      }
    }
  }
  

}
</style>
